<template>
	<view class="tabbarPageIndex">
		<!--   indexdata.index_img-->
		<!-- 	<image class="tabbarPageIndexBackImg" v-if="index_img" :src="index_img" :style="'height: '+imgHeight+'rpx;'"
			lazy-load> -->
		<!-- 	<image class="tabbarPageIndexBackImg" src="/static/tabbar/freecompress-index.png"
			:style="'height: '+imgHeight+'rpx;'" lazy-load> -->
		<image class="tabbarPageIndexBackImg" src="/static/tabbar/freecompress-index.png"
			:style="'height: '+'6142.5rpx;'" lazy-load>
			<!-- <image class="tabbarPageIndexBackImg" src="../"  lazy-load> -->

		</image>
		<!-- 		<view class="box" v-else>
			<view class="spinner">
				<view class="bounce1"></view>
				<view class="bounce2"></view>
				<view class="bounce3"></view>
			</view>

		</view> -->

		<!-- <template v-else>
			<image src="../../static/indexCover/one16.png" lazy-load class="tabbarPageIndexBackImg"></image>
			<image src="../../static/indexCover/two32.png" lazy-load class="tabbarPageIndexBackImg"></image>
			<image src="../../static/indexCover/three21.png" lazy-load class="tabbarPageIndexBackImg"></image>
			<image src="../../static/indexCover/four44.png" lazy-load class="tabbarPageIndexBackImg"></image>
			<image src="../../static/indexCover/five53.png" lazy-load class="tabbarPageIndexBackImg"></image>
			<image src="../../static/indexCover/six65.png" lazy-load class="tabbarPageIndexBackImg"></image>
		</template> -->
		<!-- <u-image :src="indexdata.index_img" :lazy-load="true" :height="imgHeight+'rpx'"></u-image> -->
		<view class="bottomButton" @tap="goConfirmAnOrder">
			<image class="bottomButtonImg"
				src="https://chongwu.aitaoba.net/storage/uploads/20231118/0b0ba6350b590d31428e8562b8908e58.png">
			</image>
		</view>
		<view class="buttomRight" @tap="goContactService">
			<view class="buttomRightLi">
				<image class="buttomRightImg"
					src="https://chongwu.aitaoba.net/storage/uploads/20231118/7952c8b7cc6f2b9ac7945554b4c47c49.png">
				</image>
				<view class="buttomRightText">联系客服</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getIndex,
		createOrder
	} from '@/api/index.js'
	export default {
		components: {

		},
		data() {
			return {
				indexdata: {},
				index_img: '',
				imgHeight: 0,
				hei: 0,
			};
		},

		/**
		 * 跳转到个人中心
		 */
		onBackPress(e) {

		},
		onPullDownRefresh() {

		},
		onShow() {

		},

		computed: {
			scrollerHeight() {
				let hei = 0
				uni.getSystemInfo({
					success: res => {
						hei = res.windowHeight + 'upx';
					}
				});
				return hei
			}
		},

		onLoad(options) {
			// uni.getSystemInfo({
			// 	success: res => {
			// 		this.hei = res.windowHeight + 'upx';
			// 		console.log(this.hei, 'ssss')
			// 	}
			// });
			console.log(this.scrollerHeight, 'ssdsdsdsdd')
			this.getIndexData();
		},

		watch: {

		},
		methods: {
			// 去联系客服
			goContactService() {
				uni.navigateTo({
					url: "/pages/contactService/contactService?service_img=" + this.indexdata.service_img
				})
			},


			// 去确认订单
			goConfirmAnOrder() {
				// uni.navigateTo({
				// 	url:"/pages/confirmAnOrder/confirmAnOrder"
				// })
				let data = {
					id: '1'
				};
				createOrder(data).then((res) => {
					// console.log(res,'下单的信息')
					if (res.code == 200) {
						uni.navigateTo({
							url: "/pages/confirmAnOrder/confirmAnOrder?pageJson=" + encodeURIComponent(JSON
								.stringify(res
									.data))
						})
					}
				}).catch((res) => {})
			},
			getIndexData() {
				let that = this;
				getIndex({}).then((resw) => {
					console.log(resw, '获取首页数据')
					if (resw.code == 200) {
						that.indexdata = resw.data;
						console.log(resw.data.index_img, '首页背景图')
						uni.getImageInfo({
							// src: resw.data.index_img,
							src: '/static/tabbar/freecompress-index.png',
							success: (res) => {

								console.log(res.height, 'res.height', res.width,
									'res.width');
								console.log(res, 'res')
								that.index_img = res.path
								that.imgHeight = 750 * ((res.height / res.width).toFixed(
									2))
								console.log(that.imgHeight, 'lalalsdsddsdsdsd')

							},
							fail: (res) => {
								console.log(res, '错误的res')
							}
						})

					}
				}).catch()
			},
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}

	.spinner {
		// margin: 100px auto 0;

		width: 150px;
		text-align: center;
	}

	.spinner>view {
		width: 30upx;
		height: 30upx;
		background-color: #f88128;

		border-radius: 100%;
		display: inline-block;
		-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
		animation: bouncedelay 1.4s infinite ease-in-out;
		/* Prevent first frame from flickering when animation starts */
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}

	.spinner .bounce1 {
		-webkit-animation-delay: -0.32s;
		animation-delay: -0.32s;
	}

	.spinner .bounce2 {
		-webkit-animation-delay: -0.16s;
		animation-delay: -0.16s;
	}

	@-webkit-keyframes bouncedelay {

		0%,
		80%,
		100% {
			-webkit-transform: scale(0.0)
		}

		40% {
			-webkit-transform: scale(1.0)
		}
	}

	@keyframes bouncedelay {

		0%,
		80%,
		100% {
			transform: scale(0.0);
			-webkit-transform: scale(0.0);
		}

		40% {
			transform: scale(1.0);
			-webkit-transform: scale(1.0);
		}
	}





	.tabbarPageIndex {
		width: 100%;
		// min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.tabbarPageIndexBackImg {
		width: 100%;
		// height: 200vh;

	}

	.bottomButton {
		width: 690rpx;
		height: 88rpx;

		position: fixed;
		bottom: 50rpx;
		left: 0rpx;
		z-index: 2;


	}

	.bottomButtonImg {
		width: 750rpx;
		height: 132rpx;
		padding: 0;
		margin: 0;


	}

	.buttomRight {
		width: 128rpx;
		height: 233rpx;
		background: linear-gradient(178deg, #FFB531 0%, #F56925 100%);
		box-shadow: 0rpx 6rpx 12rpx 1rpx rgba(63, 29, 3, 0.1608);
		border-radius: 64rpx 64rpx 64rpx 64rpx;
		opacity: 1;
		border: 2rpx solid #683518;
		box-sizing: border-box;
		position: fixed;
		bottom: 90rpx;
		right: 0;
		z-index: 3;
		transform: translate(50%, 0);
		border: 4rpx solid #683518;
		box-sizing: border-box;
	}

	.buttomRightLi {
		width: 64rpx;
		height: 233rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.buttomRightImg {
		width: 35.3rpx;
		height: 35.3rpx;
	}

	.buttomRightText {
		width: 30rpx;

		font-size: 26rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #683518;

	}
</style>